import React, { useState, memo, useMemo } from 'react';
import { DatePicker, Form, InputNumber, message } from 'antd';
import moment from 'moment';

import OrganizationSelect from '@/components/OrganizationSelect';

import Search from '@/pages/SalaryManage/components/SuperSearch';
import TwoColHead from '@/pages/SalaryManage/components/TwoColHead';
import CheckHandle from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle';
import styles from './index.less';

const { MonthPicker } = DatePicker;

const TotalHeader = props => {
    const { dispatch, dispatchType } = props;
    //  是否实时搜索
    const [immediate] = useState(false);

    //  月份切换事件
    const onChange = (date, dateString) => {
        dispatch({
            type: dispatchType.sharedState,
            payload: {
                sharePeriod: dateString
            },
            callback() {
                dispatch({
                    type: dispatchType.initType,
                    payload: dateString
                });
            }
        })
    };

    const changeSearchVal = val => {
        if (immediate) {
            dispatch({
                type: dispatchType.searchType,
                payload: val
            });
        }
    };

    //  搜索栏
    const SearchWrapper = ({ form, period, checkButtonList, organizationList, searchModel }) => {
        const { getFieldDecorator } = form;
        //  搜索按钮事件
        const searchHandle = () => {
            const {
                encryptAverageAmtHighest = '',
                encryptAverageAmtLowest = '',
                encryptTotalPayAmtHighest = '',
                encryptTotalPayAmtLowest = '',
                encryptTotalTaxAmtHighest = '',
                encryptTotalTaxAmtLowest = ''
            } = form.getFieldsValue();
            if (
                (encryptAverageAmtLowest &&
                    (encryptAverageAmtHighest || encryptAverageAmtHighest === 0) &&
                    encryptAverageAmtLowest > encryptAverageAmtHighest) ||
                (encryptTotalPayAmtLowest &&
                    (encryptTotalPayAmtHighest || encryptTotalPayAmtHighest === 0) &&
                    encryptTotalPayAmtLowest > encryptTotalPayAmtHighest) ||
                (encryptTotalTaxAmtLowest &&
                    (encryptTotalTaxAmtHighest || encryptTotalTaxAmtHighest === 0) &&
                    encryptTotalTaxAmtLowest > encryptTotalTaxAmtHighest)
            ) {
                message.error('薪资区间最小值不能大于最大值，请修改');
                return;
            }
            dispatch({
                type: dispatchType.searchType,
                payload: form.getFieldsValue()
            });
        };

        // 1.设置默认选择月份
        const periodMoment = useMemo(() => (period ? moment(period) : null), [period]);

        const {
            encryptTotalPayAmtLowest = '',
            encryptTotalPayAmtHighest = '',
            encryptTotalTaxAmtLowest = '',
            encryptTotalTaxAmtHighest = '',
            encryptAverageAmtLowest = '',
            encryptAverageAmtHighest = '',
            organizationCode,
            departmentCode
        } = searchModel;

        const maxVal = 1000000000;

        const onchangeInput = val => {
            if (val > maxVal) {
                return maxVal;
            }
            return val;
        };

        const handleOrgChange = val => {
            dispatch({
                type: dispatchType.sharedState,
                payload: {
                    shareOrganizationCode: val,
                    sharePeriod: undefined
                },
                callback() {
                    dispatch({
                        type: dispatchType.searchCondition,
                        payload: {
                            organizationCode: val
                        },
                        callback() {
                            dispatch({
                                type: dispatchType.initType
                            });
                        }
                    });
                }
            })
        }

        const handleDepChange = val => {
            dispatch({
                type: dispatchType.searchCondition,
                payload: {
                    departmentCode: val
                },
                callback() {
                    dispatch({
                        type: dispatchType.searchType
                    });
                }
            });
        }

        return (
            <Search.Wrapper onSearch={searchHandle} className={styles.overview}>
                <TwoColHead
                    rightStyle={{
                        justifyContent: 'flex-start'
                    }}
                    left={
                        <Search.Commonly>
                            <Search.Item label="机构">
                                <OrganizationSelect
                                    isStrictly
                                    allowClear={false}
                                    isNeedPermission
                                    style={{ width: 220 }}
                                    value={organizationCode}
                                    treeDataFromProp
                                    treeDataList={organizationList}
                                    onChange={handleOrgChange}
                                    unLoading
                                />
                            </Search.Item>
                            <Search.Item>
                                <OrganizationSelect
                                    isStrictly
                                    isFunctional
                                    style={{ width: 150 }}
                                    value={departmentCode}
                                    onChange={handleDepChange}
                                    extraQuery={{ auditStatus: 2 }}
                                    unLoading
                                />
                            </Search.Item>
                            <Search.Item label="月份">
                                <MonthPicker
                                    onChange={onChange}
                                    value={periodMoment}
                                    style={{
                                        width: '110px'
                                    }}
                                    allowClear={false}
                                />
                            </Search.Item>
                        </Search.Commonly>
                    }
                    right={
                        <CheckHandle
                            dispatch={dispatch}
                            period={period}
                            dispatchType={dispatchType}
                            checkButtonList={checkButtonList}
                        />
                    }
                />
                <Search.More>
                    <Search.Item label="实发薪资">
                        <Form.Item className={styles.intervalItem}>
                            {getFieldDecorator('encryptTotalPayAmtLowest', {
                                initialValue: encryptTotalPayAmtLowest,
                                getValueFromEvent: val => onchangeInput(val, 'encryptTotalPayAmtLowest')
                            })(<InputNumber className={styles.intervalNum} />)}
                        </Form.Item>{' '}
                        ~{' '}
                        <Form.Item className={styles.intervalItem}>
                            {getFieldDecorator('encryptTotalPayAmtHighest', {
                                initialValue: encryptTotalPayAmtHighest,
                                getValueFromEvent: val => onchangeInput(val, 'encryptTotalPayAmtHighest')
                            })(<InputNumber className={styles.intervalNum} min={0} />)}
                        </Form.Item>
                    </Search.Item>
                    <Search.Item label="税前薪资">
                        <Form.Item className={styles.intervalItem}>
                            {getFieldDecorator('encryptTotalTaxAmtLowest', {
                                initialValue: encryptTotalTaxAmtLowest,
                                getValueFromEvent: val => onchangeInput(val, 'encryptTotalTaxAmtLowest')
                            })(<InputNumber className={styles.intervalNum} />)}
                        </Form.Item>{' '}
                        ~{' '}
                        <Form.Item className={styles.intervalItem}>
                            {getFieldDecorator('encryptTotalTaxAmtHighest', {
                                initialValue: encryptTotalTaxAmtHighest,
                                getValueFromEvent: val => onchangeInput(val, 'encryptTotalTaxAmtHighest')
                            })(<InputNumber className={styles.intervalNum} min={0} />)}
                        </Form.Item>
                    </Search.Item>
                    <Search.Item label="平均薪资">
                        <Form.Item className={styles.intervalItem}>
                            {getFieldDecorator('encryptAverageAmtLowest', {
                                initialValue: encryptAverageAmtLowest,
                                getValueFromEvent: val => onchangeInput(val, 'encryptAverageAmtLowest')
                            })(<InputNumber className={styles.intervalNum} />)}
                        </Form.Item>{' '}
                        ~{' '}
                        <Form.Item className={styles.intervalItem}>
                            {getFieldDecorator('encryptAverageAmtHighest', {
                                initialValue: encryptAverageAmtHighest,
                                getValueFromEvent: val => onchangeInput(val, 'encryptAverageAmtHighest')
                            })(<InputNumber className={styles.intervalNum} min={0} />)}
                        </Form.Item>
                    </Search.Item>
                </Search.More>
            </Search.Wrapper>
        );
    };

    //  搜索栏模板
    const HeaderSearchWrapper = useMemo(
        () =>
            Form.create({
                onValuesChange: (p, changedValues, allValues) => {
                    changeSearchVal(allValues);
                }
            })(SearchWrapper),
        []
    );

    return <HeaderSearchWrapper {...props} />;
};

export default memo(TotalHeader);
